<template>
  <div class="module-box">
    <div v-if="!noTitle && title" class="module-box-hd" :style="hdStyle">
      <!-- <img class="module-box-hd-icon" src="@/assets/images/homePage/icon-module-title.png" alt="" /> -->
      <slot class="content-block__action" name="left-action"></slot>
      <div class="module-title-left"></div>
      <div class="content-block__title block-title" :class="[noMargin && 'no-margin', noBorder && 'no-border']">
        <span v-if="$slots.title === undefined">{{ title }}</span>
        <slot class="content-block__action" name="title"></slot>
        <img class="module-box-hd-icon" src="@/assets/images/bigScreen/img-title-line.svg" alt="" />
      </div>
      <div class="module-title-right"></div>
      <slot class="content-block__action right-action" name="right-action"></slot>
    </div>

    <div v-if="!noBody && $slots.default" class="module-box-bd" :style="bdStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script setup name="ModuleBox">
const props = defineProps({
  /**当前双向数据绑定的值 */
  value: {
    type: [String, Number],
    default: "",
  },
  title: {
    type: String,
    default: "内容块标题",
  }, ///PropTypes.string.def('内容块标题'),
  noTitle: {
    type: Boolean,
    default: false,
  },
  noBody: {
    type: Boolean,
    default: false,
  },
  noBorder: {
    type: Boolean,
    default: false,
  },
  noMargin: {
    type: Boolean,
    default: false,
  },
  hdStyle: {
    type: Array,
    default() {
      return [];
    },
  },
  bdStyle: {
    type: Array,
    default() {
      return [];
    },
  },
});
</script>

<style lang="scss" scoped>
.module-box {
  display: flex;
  flex-direction: column;

  &-hd {
    display: flex;
    height: 50px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    // background: url("@/assets/images/homePage/bg-module-title.png");
    background-size: 100% 100%;

    .module-box-hd-icon {
      padding: 4px;
    }

    .module-title-left {
      background-image: url("@/assets/images/bigScreen/bg-title-left.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      height: 13px;
      width: 170px;
    }
    .module-title-right {
      background-image: url("@/assets/images/bigScreen/bg-title-right.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      height: 13px;
      width: 170px;
    }
  }

  &__title {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &-bd {
    flex: 1;
    height: 0;
    // margin-top: 10px;
  }
}

.content-block__title {
  display: flex;
  flex-direction: column;
}

.block-title {
  font-family: 江城斜黑体;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: linear-gradient(90deg, #00f0ff 0%, #12c6ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  &.no-margin {
    margin-top: 0;
  }

  // &:not(.no-border):before {
  //   content: "";
  //   width: 4px;
  //   height: 20px;
  //   margin-right: 6px;
  //   background: #bd192d;
  //   display: inline-block;
  //   border-radius: 2px;
  //   vertical-align: sub;
  // }

  &+.block-content:not(.no-margin) {
    margin: 0 20px;
  }

  .right-action {
    margin-left: auto;
  }
}
</style>
